import Vue from 'vue'
import Vuex from 'vuex'
// import { setToken, getToken } from '@/utils/token'
import persistedstate from 'vuex-persistedstate'
import router from '@/router'
import { userProfile } from '@/api/mine'
Vue.use(Vuex)
// 持久化(基本使用方式，了解就可以了)：1：修改数据时存储到浏览器 2：初始值要读取浏览器存储的值
// 实际开发都是借助插件解决
// vuex-persistedstate
// 1:下载安装  yarn add vuex-persistedstate
// 2:导入插件  import persistedstate from 'vuex-persistedstate'
// 3:配制插件
/*
  vuex插件配制,插件默认是所有vuex数据持久化
  plugins:[persistedstate({paths:["token"]})]
*/
// store====this.$store
const store = new Vuex.Store({
  state: {
    // token
    // token: getToken() || '',
    token: '',
    userInfo: ''
  },
  getters: {},
  mutations: {
    // 修改token
    setToken (state, value) {
      state.token = value
      // setToken(value)
    },
    setNum (state, value) {
      state.num = value
    },
    // 退出的处理
    logout (state) {
      // 删除token
      state.token = ''
      // 清除用户信息
      state.userInfo = ''
      // 跳转到登录页
      // this.$router====router的实例化对象
      router.push('/login')
    },
    setUserInfo (state, value) {
      value.gender2 = value.gender === 0 ? '男' : '女'
      state.userInfo = value
    }
  },
  actions: {
    // actions作用：用于异步处理，常用于接口请求
    //  获取用户信息
    async getUserInfo (store) {
      // store:{commit:调用mutations,state:当前的state数据}
      if (!store.state.userInfo.id) {
        const res = await userProfile()
        // 如果是公共数据要调整转换，尽量在数据的源头上处理
        store.commit('setUserInfo', res.data.data)
        // console.log(3)
        // console.log('用户信息', res)
      }
    }
  },
  modules: {},
  plugins: [persistedstate({ paths: ['token'] })]
})
export default store
